<template>
    <div class="common-layout">

        <el-container>
            <div class="header">
                <el-header>
                <span class="icon">
                <el-icon :size="35">
                    <shop/>
                </el-icon>
            </span>
                    <span class="title">汪汪羊</span>
                    <el-dropdown class="el-dropdown-link">
                        <span class="MS">
                        个人中心
                    </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item @click="orderClick(users.uid)">我的订单</el-dropdown-item>
                                <el-dropdown-item @click="cartClick(users.uid)">购物车</el-dropdown-item>
                                <el-dropdown-item @click="collectClick(users.uid)">收藏夹</el-dropdown-item>
                                <el-dropdown-item @click="USelfClick(users.uid)">个人主页</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>

                    <span class="name" v-text="username"/>
                    <img :src="src" style="height: 20px; width: 20px ;float: right; padding-right: 10px;padding-top: 21px" v-show="show">
                    <el-dropdown class="el-dropdown-link">
                <span v-show="UpIn">
                    登录/注册
                </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item @click="managerSignUp = true">管理员注册</el-dropdown-item>
                                <el-dropdown-item @click="managerSignIn = true">管理员登录</el-dropdown-item>
                                <el-dropdown-item>--------</el-dropdown-item>
                                <el-dropdown-item @click="userSignUp = true">用户注册</el-dropdown-item>
                                <el-dropdown-item @click="userSignIn = true">用户登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </el-header>
            </div>
            <!--            管理员注册对话框-->
            <el-dialog v-model="managerSignUp" title="管理员注册" width="30%" center>
                <el-form :model="ManagerSignUpform" label-width="80px">
                    <el-form-item label="Name">
                        <el-input v-model="ManagerSignUpform.name" placeholder="name"/>
                    </el-form-item>
                    <el-form-item label="Email">
                        <el-input v-model="ManagerSignUpform.email" placeholder="email"/>
                    </el-form-item>
                    <el-form-item label="Telephone">
                        <el-input v-model="ManagerSignUpform.telephone" placeholder="telephone"/>
                    </el-form-item>
                    <el-form-item label="Password">
                        <el-input type="password" v-model="ManagerSignUpform.password" placeholder="password"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="managerSignup" type="primary" @click="ManagerSignUpOnSubmit()">sign up
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
            <!--            管理员登录对话框-->
            <el-dialog v-model="managerSignIn" title="管理员登录" width="30%" center>
                <el-form :model="ManagerSignInform" label-width="80px">
                    <el-form-item label="Account">
                        <el-input v-model="ManagerSignInform.account" placeholder="email / telephone / name"/>
                    </el-form-item>
                    <el-form-item label="Password">
                        <el-input type="password" v-model="ManagerSignInform.password" placeholder="password"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="ManagerSignInOnSubmit()">sign in</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
            <!--            用户注册对话框-->
            <el-dialog v-model="userSignUp" title="用户注册" width="60%" align-center>
                <el-form :model="createForm" label-width="60">
                    <el-form-item label="昵称">
                        <el-input v-model="createForm.username" placeholder="username"/>
                    </el-form-item>
                    <el-form-item label="邮箱">
                        <el-input v-model="createForm.email"/>
                    </el-form-item>
                    <el-form-item label="电话">
                        <el-input v-model="createForm.telephone"/>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input v-model="createForm.password" type="password" show-password/>
                    </el-form-item>
                    <el-form-item label="头像">
                        <el-upload
                            v-model:file-list="fileList"
                            :auto-upload="false"
                            :limit="1"
                        >
                            <el-button type="primary">上传</el-button>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="生日">
                        <el-date-picker
                            v-model="createForm.dob"
                            type="date"
                            placeholder="Pick a date"
                            :default-value="new Date(2001, 1, 1)"
                        />

                    </el-form-item>
                </el-form>
                <template #footer>
          <span class="dialog-footer">
            <el-button @click="userSignUp = false">取消</el-button>
            <el-button type="primary" @click="create">
              添加
            </el-button>
          </span>
                </template>
            </el-dialog>
            <!--            用户登录对话框-->
            <el-dialog v-model="userSignIn" title="用户登录" width="30%" center>
                <el-form :model="UserSignInform" label-width="80px">
                    <el-form-item label="Account">
                        <el-input v-model="UserSignInform.account" placeholder="email / telephone / username"/>
                    </el-form-item>
                    <el-form-item label="Password">
                        <el-input type="password" v-model="UserSignInform.password" placeholder="password"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="UserSignInOnSubmit()">sign in</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>

            <div class="FL" style="margin-left: 135px; margin-top: 10px">
                <span class="Ftitle" @click="all">全部</span>
                <el-dropdown style="padding-top: 7px">
                    <span class="Ftitle">数码家电</span>
                    <template #dropdown>
                        <el-dropdown-menu style="background-color: #888888" :model="queryKid.kid">
                            <el-dropdown-item @click="phone" style="color:white;">手机</el-dropdown-item>
                            <el-dropdown-item @click="computer" style="color:white;">电脑</el-dropdown-item>
                            <el-dropdown-item @click="conditioning"  style="color:white">空调</el-dropdown-item>
                            <el-dropdown-item @click="refrigerator" style="color:white;">冰箱</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>

                <el-dropdown style="padding-top: 7px">
                    <span class="Ftitle">生活用品</span>
                    <template #dropdown>
                        <el-dropdown-menu style="background-color: #888888" :model="queryKid.kid">
                            <el-dropdown-item @click="jy" style="color:white;">家用</el-dropdown-item>
                            <el-dropdown-item @click="out" style="color:white;">外出携带</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>

                <el-dropdown style="padding-top: 7px">
                    <span class="Ftitle">服装百货</span>
                    <template #dropdown>
                        <el-dropdown-menu style="background-color: #888888" :model="queryKid.kid">
                            <el-dropdown-item @click="mz" style="color:white;">男装</el-dropdown-item>
                            <el-dropdown-item @click="wz" style="color:white;">女装</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>

                <el-input class="in1" v-model="queryForm.account" clearable placeholder="title" style="width: 300px; margin-left: 340px">
                    <template #append>
                        <el-button icon="Search" @click="queryByAccount"></el-button>
                    </template>
                </el-input>
            </div>
            <div class="main">
                <el-carousel :interval="5000" arrow="always">
                    <el-carousel-item v-for="item in 4" :key="item">
                        <h3 text="2xl" justify="center">{{ item }}</h3>
                    </el-carousel-item>
                </el-carousel>
                <el-main>
                    <el-row gutter="20">
                        <el-col :span="6" v-for="product in products" :key="product">
                            <el-card class="product-card" :pid="product.pid" @click="handClick(product.pid)">
                                <div class="info">
                                    <el-image class="product-picture" :src="`http://127.0.0.1:8081/product/${product.picture}`"></el-image>
                                    <div>
                                        <el-text type="info" truncated>{{ product.title }}</el-text>
                                    </div>
                                    <div>
                                        <el-text type="info" truncated>{{ product.subtitle }}</el-text>
                                    </div>
                                    <div>
                                        <el-space>
                                            <el-text type="danger">{{ product.price }}</el-text>
                                        </el-space>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>

                </el-main>
            </div>
            <el-footer>
                <el-footer>&copy;2023 by 汪汪羊<sup>&reg;</sup></el-footer>
            </el-footer>
        </el-container>
    </div>
</template>

<script setup>
import {ArrowDown} from '@element-plus/icons-vue'
import router from '../router/index.js'
import {onMounted, ref,reactive,toRaw} from 'vue'
import axios from "axios";
import {ElMessage} from "element-plus";
import userApi from "../api/user.js";
import managerApi from "../api/manager.js"
import productApi from "../api/product.js";
import user from "../api/user.js";
import User from "../api/user.js";

const ManagerSignUpform = reactive({
    name: '',
    email: '',
    telephone: '',
    password: ''
})
const ManagerSignInform = reactive({
    account: '',
    password: ''
})
const createForm = reactive({
    username: '',
    email: '',
    telephone: '',
    password: '',
    file: '',
    dob: ''
})
const UserSignInform = reactive(
    {
        account: '',
        password: ''
    }
)
const managerSignUp = ref(false)
const managerSignIn = ref(false)
const userSignUp = ref(false)
const userSignIn = ref(false)
const ManagerSignUpOnSubmit = () => {
    console.log(ManagerSignUpform)
    axios.post('http://localhost:8080/manager/create', ManagerSignUpform)
        .then(res => {
            console.log(res.data)
            if (res.data) {
                ElMessage.success('注册成功请登录!')
                managerSignUp.value = false
            } else {
                ElMessage.error('Invalid account or password')
            }
        }).catch(err => {
        console.error(err)
    })
}
const ManagerSignInOnSubmit = async() => {
    console.log(ManagerSignInform)
    const res = await managerApi.signIn(ManagerSignInform)
    const token = res.data
    if(token){
        console.log('token from server: ', token)
        localStorage.setItem('token', token) // localStorage.token = token
        console.log('token in local storage: ', localStorage.getItem('token')) // localStorage.token
        // router.push('/manager/MSelf')
        router.push({
            path:'/manager/MSelf',
        })
    }else{
        ElMessage.error(('Invalid nickname or password.'))
    }
}

const fileList = ref([])
const type = {type: 'application/json'}
const create = async () => {

    createForm.favorites = JSON.stringify(createForm.favorites)
    createForm.files = fileList
    createForm.file = createForm.files[0].raw
    createForm.user = new Blob([JSON.stringify(toRaw(createForm))], type)

    userSignIn.value = false
    const res = await userApi.create(createForm)
    if (res.data) {
        ElMessage.success('添加成功');

    } else {
        ElMessage.error('添加失败');
    }
}
const username = ref()
const ress = ref()

const src = ref()
const UpIn = ref(true)
const show = ref()
const uid =ref()
const users = reactive({
    uid:''
})
const UserSignInOnSubmit = () => {
    userSignIn.value = false
    axios.post('http://localhost:8080/user/queryByAccountAndPassword', UserSignInform)
        .then(res => {
            console.log(res.data)
            if (res.data) {
                alert("登录成功");
                username.value= res.data.username
                ress.value= res.data.uid
                src.value = `http://127.0.0.1:8081/avatar/${res.data.avatar}`
                show.value = true
                UpIn.value=false
                uid.value = res.data.uid
                users.uid = res.data.uid
            } else {
                alert('登录失败');
            }
        }).catch(err => {
        console.error(err)
    })
}
const products = ref([]);
axios.get('http://127.0.0.1:8080/product/queryAllCommented')
    .then(res => {
        products.value = res.data
    }).catch(err =>{
        console.error(err)
})

const handClick = (pid) => {
    router.push({
        path:'/product/detail',
        query:{
            pid:pid,
            uid:users.uid
        }
    })
}
const orderClick = async(uid) =>{
    console.log(uid)
    const res = ress.value
    if(res){
        // router.push('/user/order')
        router.push({
            path:'/user/order',
            query:{
                uid:uid
            }
        })
    }else {
        alert("未登录，请先登录")
    }
}
const cartClick = async(uid) =>{
    const res = ress.value
    if(res){
        // router.push('/user/cart')
        router.push({
            path:'/user/cart',
            query:{
                uid:uid
            }
        })
    }else {
        alert("未登录，请先登录")
    }
}
const collectClick = async(uid) =>{
    const res = ress.value
    if(res){
        // router.push('/user/collect')
        router.push({
            path:'/user/collect',
            query:{
                uid:uid
            }
        })
    }else {
        alert("未登录，请先登录")
    }
}
const USelfClick = async(uid) =>{
    const res = ress.value
    if(res){
        // router.push('/user/USelf')
        router.push({
            path:'/user/USelf',
            query:{
                uid:uid
            }
        })
    }else {
        alert("未登录，请先登录")
    }
}

const queryForm = reactive({
    account:''
})
const queryByAccount = async() =>{
    const res = await productApi.queryByAccount({account:queryForm.account})
    products.value = res.data
}
const all = async() =>{
    const res = await productApi.queryAll()
    products.value = res.data
}

const queryKid = reactive({
    kid1: '1',
    kid2: '2',
    kid3: '3',
    kid4: '4',
    kid5: '5',
    kid6: '6',
    kid7: '7',
    kid8: '8'
})
const phone = async() =>{
    const res = await productApi.queryByKid({kid:queryKid.kid1})
    products.value = res.data
}
const computer = async() =>{
    const res = await productApi.queryByKid({kid:queryKid.kid2})
    products.value = res.data
}
const conditioning = async() =>{
    const res = await productApi.queryByKid({kid:queryKid.kid3})
    products.value = res.data
}
const refrigerator = async() =>{
    const res = await productApi.queryByKid({kid:queryKid.kid4})
    products.value = res.data
}
const jy = async() =>{
    const res = await productApi.queryByKid({kid:queryKid.kid5})
    products.value = res.data
}
const out = async() =>{
    const res = await productApi.queryByKid({kid:queryKid.kid6})
    products.value = res.data
}
const mz = async() =>{
    const res = await productApi.queryByKid({kid:queryKid.kid7})
    products.value = res.data
}
const wz = async() =>{
    const res = await productApi.queryByKid({kid:queryKid.kid8})
    products.value = res.data
}

</script>

<style scoped>
.common-layout {
    width: 100%;
    margin: auto;
    height: auto;
}
.common-layout{
    cursor: pointer;
}

.header {
    height: 60px;
    background: rgba(33, 33, 33, .8);
    color: #f9f9f9;
    width: 100%;
}

.main{
    width: 80%;
    margin-left: 135px;
    padding-top: 10px;
}

.el-container {

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.el-container.is-vertical {
    height: 100%;
}

.el-icon {
    color: orangered;
}

.icon {
    display: inline-block;
    vertical-align: middle; /*垂直方向居中对齐*/
}

.title {
    margin-left: 10px;
    font-size: 25px;
    font-weight: bolder;
    line-height: 60px; /* 行高 行高等于父级容器的高度 将在父级容器中垂直居中 */
}

.product-card {
    margin-bottom: 20px;
}

.info {
    text-align: center;
}
.el-card {
    width: 220px;
    --el-card-padding: 0px;

}

.product-card:hover {
    cursor: pointer;
    background: bisque;
}

.el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
    text-align: center;
}


.el-carousel__item:nth-child(2n) {
    background-image: url("http://127.0.0.1:8081/lunbo/1.jpg");
    background-image: url("http://127.0.0.1:8081/lunbo/2.jpg");
}
.el-carousel__item:nth-child(2n + 1) {
    background-image: url("http://127.0.0.1:8081/lunbo/3.jpg");
    background-image: url("http://127.0.0.1:8081/lunbo/4.jpg");
}

.el-dropdown-link
{
    float: right;
    padding-top: 22px;
    padding-right: 20px;
    color: white;
}
/*.MS,*/
.name{
    float: right;
    padding-right: 10px;
    padding-top: 22px;
    font-size: 10px;
}

.example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
}

.managerSignup {
    margin-left: 50px;
}

.el-footer {
    color: #f9f9f9;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background: rgba(33, 33, 33, .8);
}

.product img {
    height: 245px;
}


.title
 {
    padding: 8px 10px;
    font-weight: bold;
}

.price {
    color: orangered;
}

.sub-title {
    color: #666;
}

hr {
    width: 160px;
    height: 1px;
    margin: 8px auto;
    color: #ffffee;
    border: 0;
    border-top: 1px #ddd solid;
}
.Ftitle{
    margin-left: 50px;
    font-style: oblique;
}

</style>
